{% extends "base.html" %}
{% load static %}

{% block title %}数据源列表{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>数据源列表</h2>
        {% if can_manage_datasource %}
        <a href="{% url 'datasource_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> 添加数据源
        </a>
        {% endif %}
    </div>

    {% if messages %}
    <div class="messages mb-3">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="row">
        {% for datasource in datasources %}
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ datasource.name }}</h5>
                    <span class="badge bg-primary">{{ datasource.get_type_display }}</span>
                </div>
                <div class="card-body">
                    <p class="card-text"><strong>连接字符串：</strong>{{ datasource.connection_string }}</p>
                    {% if datasource.description %}
                    <p class="card-text"><strong>描述：</strong>{{ datasource.description }}</p>
                    {% endif %}
                    <p class="card-text">
                        <small class="text-muted">创建时间：{{ datasource.created_at|date:"Y-m-d H:i:s" }}</small>
                    </p>
                </div>
                <div class="card-footer">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary test-connection" 
                                data-datasource-id="{{ datasource.id }}">
                            <i class="bi bi-lightning"></i> 测试连接
                        </button>
                        {% if datasource.type == 'opcua' %}
                        <a href="{% url 'opcua_subscription_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-list-check"></i> 查看订阅
                        </a>
                        {% else %}
                        <a href="{% url 'mqtt_subscription_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-list-check"></i> 查看订阅
                        </a>
                        {% endif %}
                        {% if can_manage_datasource %}
                        <a href="{% url 'datasource_update' datasource.id %}" class="btn btn-outline-secondary">
                            <i class="bi bi-pencil"></i> 编辑
                        </a>
                        <a href="{% url 'datasource_delete' datasource.id %}" class="btn btn-outline-danger">
                            <i class="bi bi-trash"></i> 删除
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">
                {% if can_manage_datasource %}
                还没有添加任何数据源。点击右上角的"添加数据源"按钮开始添加。
                {% else %}
                目前还没有任何可用的数据源。请联系管理员添加数据源。
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 测试连接按钮点击事件
    document.querySelectorAll('.test-connection').forEach(button => {
        button.addEventListener('click', function() {
            const datasourceId = this.dataset.datasourceId;
            const button = this;
            const originalText = button.innerHTML;
            
            button.disabled = true;
            button.innerHTML = '<i class="bi bi-hourglass"></i> 测试中...';
            
            fetch(`/subscriptions/datasources/${datasourceId}/test/`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('连接成功！');
                    } else {
                        alert('连接失败：' + data.message);
                    }
                })
                .catch(error => {
                    alert('测试失败：' + error);
                })
                .finally(() => {
                    button.disabled = false;
                    button.innerHTML = originalText;
                });
        });
    });
});
</script>
{% endblock %}
